<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="keywords" content="大数据管理平台,大屏,大数据">
    <meta name="description" content="大数据管理平台">
    <title>大数据管理平台</title>
    <script th:inline="javascript">var ctx = [[${ctx}]];</script>
    <link th:href="${ctx}+'lib/bootstrap/bootstrap.min.css'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'lib/bootstrap-table/bootstrap-table.min.css?v=1.18.3'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'lib/font-awesome/css/font-awesome.css'" rel="stylesheet" type="text/css"/>
    <link th:href="${ctx}+'css/BigData.css'" rel="stylesheet" type="text/css"/>

    <!-- Icons -->
    <link rel="apple-touch-icon" type="text/html" sizes="76x76" th:href="${ctx}+'image/apple-icon.png'">
    <link rel="shortcut icon" type="text/html" sizes="96x96" th:href="${ctx}+'image/favicon.png'">
</head>
<body class="white-bg">
    <div class="data_body">
        <div class="index_nav" >
            <ul style="height: 30px; margin-bottom: 0px;">
                <li class="l_left total_chose_fr nav_active">实时监控</li>
                <!--<li class="l_left total_chose_pl" >统计分析</li>-->
            </ul>
            <div class="clear"></div>
        </div>

        <div class="index_tabs">
            <!--天气信息-->
            <div class="inner" style="height: 109%;">
                <div class="left_cage">
                    <div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important;">
                        <div class="dataAllBorder02 dark_cage">
                            <div class="row daily-weather">
                                <div class="col-sm-4">
                                    <canvas height="60" width="60" id="weather_sky"></canvas>
                                </div>
                                <div class="col-sm-3">
                                    <h5 id="weather_type"></h5>
                                </div>
                                <div class="col-sm-8">
                                    <h3 class="degrees_top" id="weather_wendu"></h3>
                                </div>
                                <div class="col-sm-12 daily-desc">
                                    <h5 id="weather_desc"></h5>
                                </div>
                                <div class="col-sm-12 daily-desc">
                                    <h5 id="weather_shidu"></h5>
                                </div>
                                <div class="col-sm-12 daily-desc">
                                    <h5 id="weather_pm25"></h5>
                                </div>
                                <div class="col-sm-12 daily-desc">
                                    <h5 id="weather_quality"></h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important;">
                        <div class="dataAllBorder02 dark_cage" style="padding: 1.2%;">
                            <div class="message_scroll_box">
                                <div class="message_scroll">
                                    <div class="scroll_top">
                                        <span class="scroll_title">一周天气情况</span>
                                        <a class="localize"></a>
                                        <span class="scroll_timer" th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd')}"></span>
                                    </div>
                                    <div id="weather_week_msg" class="msg_cage">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important;">
                        <div class="dataAllBorder02 dark_cage" style="padding: 1.2%;">
                            <div class="message_scroll_box">
                                <div class="scroll_top">
                                    <div class="echarts" id="charts-user"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="center_cage">
                    <div id="center-map-cage" class="dataAllBorder01 cage_cl" style="margin-top: 3.5% !important; height: 62.7%; position: relative;">
                        <div class="dataAllBorder02">
                            <!--标题栏-->
                            <div class="map_title_box" style="height: 6%">
                                <div class="map_title_innerbox">
                                    <div class="map_title">实时地图</div>
                                </div>
                            </div>
                            <div class="map" id="map"></div>
                            <!--地图工具栏-->
                            <div class="map_tool_outbox">
                                <span class="map_tool">
                                    <a class="map_tool_inner address_check_btn check_btn" title="地址检索" style="background-position-x:-180px"></a>
                                </span>
                                <span class="map_tool">
                                    <a class="map_tool_inner bus_check_btn check_btn" title="公交检索" style="background-position-x:-361px;background-position-y:-6px"></a>
                                </span>
                                <span class="map_tool">
                                    <a class="map_tool_inner login_log_check_btn check_btn" title="服务器检索" style="background-position-x:-472px"></a>
                                </span>
                                <span class="map_tool">
                                   <input type="text" id="txtCoord" style="width:150px;visibility:hidden" />
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="dataAllBorder01 cage_cl" style="margin-top: 0.6% !important; height: 32.1%;">
                        <div class="dataAllBorder02" id="map_title_innerbox">
                            <div class="map_title_box">
                                <div class="map_title_innerbox">
                                    <div class="map_title map_sec_title_img">公交路线图</div>
                                </div>
                            </div>
                            <ul class="tab_msg_box">
                                <li class="tab_msg tab_msg01 tab_msg_current">车辆位置</li>
                                <li class="tab_msg tab_msg02">车站站点</li>
                            </ul>
                            <div id="busTimeInfo"></div>
                        </div>
                    </div>
                </div>

                <div class="right_cage" id="right_cage">
                    <div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important;">
                        <div class="dataAllBorder02 dark_cage" id="cage_cl">
                            <div class="analysis">当前时间：</div>
                            <ul  class="data_show_box">
                                <li id="time_hour_1" class="data_cage">0</li>
                                <li id="time_hour_2" class="data_cage">0</li>
                                <li class="data_cage" style="background-image: none;">:</li>
                                <li id="time_min_1" class="data_cage">0</li>
                                <li id="time_min_2" class="data_cage">0</li>
                                <li class="data_cage" style="background-image: none;">:</li>
                                <li id="time_sec_1" class="data_cage">0</li>
                                <li id="time_sec_2" class="data_cage">0</li>
                            </ul>
                            <div class="depart_number_box">
                                <ul class="depart_number_cage">
                                    <li class="depart_name">CPU：</li>
                                    <li class="depart_number" id="sys_usage"></li>
                                </ul>
                                <ul class="depart_number_cage">
                                    <li class="depart_name">使用率：</li>
                                    <li class="depart_number" id="cpu_used"></li>
                                </ul>
                                <ul class="depart_number_cage">
                                    <li class="depart_name">内存：</li>
                                    <li class="depart_number" id="jvm_total"></li>
                                </ul>
                                <ul class="depart_number_cage">
                                    <li class="depart_name">使用率：</li>
                                    <li class="depart_number" id="mem_usage"></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important;">
                        <!--登录记录切换01-->
                        <div class="dataAllBorder02 addition_log_check_in dataAllBorder20" id="login_log">
                            <table id="sys_info_table" class="table table-bordered"></table>
                        </div>
                        <!--地址查询切换02-->
                        <div class="dataAllBorder02 addition_address_check_in" id="position_check_in" style="display: none;padding-top: 50%">
                            <div class="analysis" style="height: 34px;%">地址检索：</div>
                            <div class="search_plate_box">
                                <ul class="search_separate">
                                    <li class="search_title">地址：</li>
                                    <li class="search_input_box"><input class="search_input" type="text" id="local_search"></li>
                                </ul>
                                <button class="search_btn" onclick="localSearch()">开始检索</button>
                            </div>
                            <!--检索结果板块-->
                            <div class="search_result_box" id="local_search_result"></div>
                        </div>
                        <!--公交查询切换03-->
                        <div class="dataAllBorder02 addition_bus_check_in" id="bus_check_in" style="display: none;padding-top: 50%">
                            <div class="analysis" style="height: 34px;">公交检索：</div>
                            <div class="search_plate_box">
                                <ul class="search_separate">
                                    <li class="search_title">公交路线：</li>
                                    <li class="search_input_box"><input class="search_input" type="text"  id="selBLine"></li>
                                </ul>
                                <ul class="search_separate">
                                    <li class="search_title">公交方向：</li>
                                    <select id="selBDir" name="selBDir" class="search_input_box search_chose_box"></select>
                                </ul>
                                <ul class="search_separate">
                                    <li class="search_title">公交站点：</li>
                                    <select id="selBStop" name="selBStop" class="search_input_box search_chose_box"></select>
                                </ul>
<!--                                <button class="search_btn" onclick="busSearch()">开始检索</button>-->
                            </div>
                            <!--检索结果板块-->
                            <div class="search_result_box" id="bus_search_result"></div>
                            <!--翻页模块-->
                            <div class="car_tcdPageCode"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div th:replace="/common/include :: footer"></div>
    <div th:replace="/common/include :: paginatorJs"></div>
    <div th:replace="/common/include :: echartsJs"></div>
    <div th:replace="/common/include :: baiduMap"></div>
    <div th:replace="/common/include :: artDialog"></div>
    <div th:replace="/common/include :: skyconsJs"></div>

    <script th:inline="javascript">
        var map,_h, _m, _s;
        $(function() {
            //选项卡切换
            $(".index_nav ul li").each(function(index){
                $(this).click(function(){
                    $(this).addClass('nav_active').siblings().removeClass('nav_active');
                    $('.index_tabs .inner').eq(index).fadeIn().siblings('div').stop().hide();
                    if (index==1) {
                    }
                })
            });

             //日志检索
            $('.login_log_check_btn').click(function () {
                $('.addition_log_check_in').show().siblings().hide()
            });
            //地址检索
            $('.address_check_btn').click(function () {
                //计算地图高度
                var height = $('#right_cage').height();
                $('.search_result_box').height(height*0.6+ 'px');
                $('.addition_address_check_in').show().siblings().hide();
            });
            //公交检索
            $('.bus_check_btn').click(function () {
                //计算地图高度
                var height = $('#right_cage').height();
                $('.search_result_box').height(height*0.5+ 'px');
                $('.addition_bus_check_in').show().siblings().hide();
            });

            //加载时间插件
            initTime();
            //加载天气组件
            initWeather();
            //加载访问量统计
            initLoginLog();
            //加载服务器信息
            initServerInfo(true);
            setInterval(initServerInfo, 30000);
            //加载百度地图
            initBaiduMap();
            //加载公交按钮交互
            initBusBtn();
        });

        //加载时间插件
        function initTime() {
            var _now = new Date();
            _h = _now.getHours();
            _m = _now.getMinutes();
            _s = _now.getSeconds();
            setInterval(updateTime, 1000);
        }

        function updateTime() {
            let hour, minute, second;
            _s++;
            if (_s > 59) {
                _s = 0;
                _m++;
            }
            if (_m > 59) {
                _m = 0;
                _h++;
            }
            if (_h > 24) {
                _h = _h - 24;
            }

            hour = appendZero(_h);
            minute = appendZero(_m);
            second = appendZero(_s);
            $('#time_hour_1').text(hour.charAt(0));
            $('#time_hour_2').text(hour.charAt(1));
            $('#time_min_1').text(minute.charAt(0));
            $('#time_min_2').text(minute.charAt(1));
            $('#time_sec_1').text(second.charAt(0));
            $('#time_sec_2').text(second.charAt(1));
        }

        function appendZero(num) {
            if (num < 10)
                return '0' + num;
            else
                return num + '';
        }

        // 加载天气组件
        function initWeather() {
            $.ajax({
                url: ctx + 'public/weather',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        // 设置今日天气
                        $('#weather_city').text(result.param.today.city);
                        $('#weather_type').text(result.param.today.type);
                        $('#weather_wendu').text('温度 : ' + result.param.today.wendu);
                        $('#weather_shidu').text('湿度 : ' + result.param.today.shidu);
                        $('#weather_pm25').text('PM2.5 : ' + result.param.today.pm25);
                        var desc = '<span class="degrees_top_small">' + result.param.today.high + '</span>';
                        desc += '<span class="degrees_top_small">' + result.param.today.low + '</span>';
                        desc += '<span>' + result.param.today.fx + '</span>';
                        desc += '<span>' + result.param.today.fl + '</span>';
                        $('#weather_desc').html(desc);
                        $('#weather_quality').text('空气质量 : ' + result.param.today.quality);
                        var icons = new Skycons({
                            'color' : '#ffffff'
                        });
                        icons.set('weather_sky', result.param.today.canvas);
                        icons.play();

                        var category = result.param.forecast.category;
                        var wendu_high = result.param.forecast.high;
                        var wendu_low = result.param.forecast.low;
                        for (let i = 0; i < category.length; i++) {
                            let html = '<div class="row localize_msg">' +
                                        '<span class="ml20 mr20">' + category[i] + '</span>' +
                                        '<div style="float: right; margin-right: 15px;">' +
                                        '<span class="degrees">' + wendu_low[i] + '</span> - ' +
                                        '<span class="degrees">' + wendu_high[i] + '</span>' +
                                        '</div>' +
                                        '</div>';
                            $('#weather_week_msg').append(html);
                        }
                    } else {
                        console.log('加载天气组件异常');
                    }
                }
            });
        }

        // 加载服务器信息
        function initServerInfo(create) {
            $.ajax({
                url: ctx + 'api/monitor/server_info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        $('#sys_usage').text(result.param.cpu.sys + '%');
                        $('#cpu_used').text(result.param.cpu.used + '%');
                        $('#jvm_total').text(result.param.jvm.total + 'MB');
                        $('#mem_usage').text(result.param.jvm.usage + '%');
                        if (result.param.jvm.usage >= 80){
                            $('#mem_usage').addClass('text-danger');
                        } else {
                            $('#mem_usage').removeClass('text-danger');
                        }

                        initSysInfoTable(result.param.sysFiles, create);
                    } else {
                        console.log('加载服务器信息异常');
                    }
                }
            });
        }

        function initSysInfoTable(data, create) {
            if (create) {
                $('#sys_info_table').bootstrapTable({
                    data: data,
                    pagination: false,
                    striped: true,
                    columns: [{
                        title: '路径',
                        field: 'dirName'
                    }, {
                        title: '总大小',
                        field: 'total'
                    }, {
                        title: '已用',
                        field: 'used'
                    }, {
                        title: '可用',
                        field: 'free',
                        formatter: function(value, row, index) {
                            if (row.usage >= 80) {
                                return '<span class="text-danger">' + value + '</span>';
                            } else {
                                return '<span>' + value + '</span>';
                            }
                        }
                    }]
                });
            } else {
                $('#sys_info_table').bootstrapTable('refresh', data);
            }
        }

        function initLoginLog() {
            $.ajax({
                url: ctx + 'public/visit/chart',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        var chart = echarts.init(document.getElementById('charts-user'));
                        var option = {
                            title: {
                                text: '最近访问量',
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            legend: {
                                data: ['访问人数'],
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            grid: {
                                x: 40,
                                x2: 40,
                                y2: 24
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: result.param.category,
                                    axisLabel: {
                                        textStyle: {
                                            color: 'white'
                                        }
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    axisLabel: {
                                        textStyle: {
                                            color: 'white'
                                        }
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '访问人数',
                                    type: 'bar',
                                    data: result.param.visit,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最多访问次数'}
                                        ]
                                    },
                                    markLine: {
                                        axisLabel: {
                                            formatter: '{value}人'
                                        },
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    },
                                    textStyle: {
                                        color: 'white'
                                    }
                                }
                            ]
                        };

                        chart.setOption(option);
                        $(window).resize(chart.resize);
                    } else {
                        console.log('加载用户访问量组件异常');
                    }
                }
            });
        }

        var city = '北京';
        // 加载百度地图
        function initBaiduMap() {
            //计算地图高度
            var height = $('#center-map-cage').height();
            $('#map').height(height+ 'px');
            map = new BMap.Map('map');
            // 初始化地图
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
            // 添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));
            // 添加定位控件
            var geolocationControl = new BMap.GeolocationControl();
            geolocationControl.addEventListener('locationSuccess', function(e){
                // 定位成功事件
                //e.addressComponent.province;
                //e.addressComponent.city;
                //e.addressComponent.district;
                //e.addressComponent.street;
                // e.addressComponent.streetNumber;
            });
            getCurrentPosition();
            map.addControl(geolocationControl);
            // 设置地图显示的城市
            //map.setCurrentCity(city);
            // 开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            map.enableInertialDragging();
            map.enableContinuousZoom();
            // 添加切换城市控件
            var size = new BMap.Size(10, 20);
            map.addControl(new BMap.CityListControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: size,
                // 切换城市之前事件
                onChangeBefore: function(){
                },
                // 切换城市之后事件
                onChangeAfter:function(){
                }
            }));
        }

        function getCurrentPosition() {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r) {
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                }
            }, {enableHighAccuracy: true});
        }

        function initBusBtn() {
            //改变公交线路
            $('#selBLine').change(function () {
                $('#selBDir').empty();
                $('#selBStop').empty();
                $('#busTimeInfo').empty();
                var selBLine = $(this).val();
                busSearch(selBLine);
            });
            //改变公交方向
            $('#selBDir').change(function () {
                var selBLine = $('#selBLine').val();
                var selBDir = $(this).val();
                $.ajax({
                    url: ctx + 'public/bus/stop?selBLine='+selBLine+'&selBDir='+selBDir,
                    type: 'get',
                    dataType: 'json',
                    success: function (result) {
                        $('#selBStop').empty();
                        if (result.code === 200) {
                            $('#selBStop').append(result.param);
                        }
                    }
                });
            });
            //改变公交站点
            $('#selBStop').change(function () {
                var selBLine = $('#selBLine').val();
                var selBDir = $('#selBDir').val();
                var selBStop = $(this).val();
                $.ajax({
                    url: ctx + 'public/bus/time?selBLine='+selBLine+'&selBDir='+selBDir+'&selBStop='+selBStop,
                    type: 'get',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 200) {
                            var obj = eval('(' + result.param + ')');
                            $('#busTimeInfo').html(obj.html);
                        }
                    },
                    error: function(result) {}
                });
            });
        }

        var busline;
        var bus_list = [];

        function busSearch(busName) {
            if (!busline) {
                busline = new BMap.BusLineSearch(map, {
                    renderOptions: {map: map},
                    onGetBusListComplete: function (result) {
                        bus_list = [];
                        $('#bus_search_result').empty();
                        if (result) {
                            $.each(result.RA, function(i, bus){
                                if (bus.name.indexOf('-') != -1) {
                                    bus_list.push(result.getBusListItem(i));

                                    var html = '<ul class="search_result_bus">' +
                                        '<li class="search_result_add">' + bus.name + '</li>' +
                                        '<li class="search_location" title="定位" onclick="showBusMap('+i+')"></li>' +
                                        '</ul>'
                                    $('#bus_search_result').append(html);
                                }
                            });
                        }
                    }
                });
            }

            busline.getBusList(busName);
        }

        function showBusMap(i) {
            if (busline) {
                busline.getBusLine(bus_list[i]);

                $.ajax({
                    url: ctx + 'public/bus/dir?selBLine=' + bus_list[i].MA,
                    type: 'get',
                    dataType: 'json',
                    success: function (result) {
                        $('#selBDir').empty();
                        if (result.code === 200) {
                            $('#selBDir').append(result.param);
                        }
                    }
                });
            }
        }

        var local_search;
        var search_list = [];

        function localSearch() {
            var value = $('#local_search').val();
            if (value) {
                if (!local_search) {
                    local_search = new BMap.LocalSearch(map, {
                        renderOptions: {
                            map: map,
                            autoViewport: true
                        },
                        onSearchComplete: function(results) {
                            search_list = [];
                            $('#local_search_result').empty();
                            if (results) {
                                $.each(results.Ir, function(i, local) {
                                    search_list.push(local.point);

                                    var html = '<ul class="search_result">' +
                                        '<li class="search_result_add">'+local.title+'</li>' +
                                        '<li class="search_location" title="定位" onclick="showLocalMap('+i+')"></li>' +
                                        '<li class="search_result_road">'+local.address+'</li>' +
                                        '</ul>';
                                    $('#local_search_result').append(html);
                                });
                            }
                        }
                    });
                }

                local_search.search(value);
            }
        }

        function showLocalMap(i) {
            if (local_search) {
                var point = search_list[i];
                map.centerAndZoom(new BMap.Point(point.lng, point.lat), 17);
            }
        }
    </script>
</body>
</html>
